<script setup lang="ts">
import { ref, reactive } from 'vue';
import EstunMainRightMenu from './_EstunMainRightMenu.vue';

const props: any = defineProps<{
    ujt: any;
}>();

const rfRightMenuArea: any = ref(null);

const opt: any = reactive({
    isMenuPopVisible: false,
    isMenuVisible: true,
    curMenuItem: {},
    openPopup,
    closePopup,
});

function openPopup(item: any) {
    if (opt.curMenuItem.value === item.value) {
        closePopup();
        return;
    }
    opt.curMenuItem = item;
    opt.isMenuPopVisible = true;
}

function closePopup() {
    opt.curMenuItem = {};
    opt.isMenuPopVisible = false;
    rfRightMenuArea.value.style.width = '';
    rfRightMenuArea.value.style.minWidth = '';
}
</script>
<template>
    <div
        v-if="opt.isMenuVisible"
        :class="opt.isMenuPopVisible ? 'as-estun-right-cur' : 'as-estun-right'"
        ref="rfRightMenuArea"
        id="estunmainright"
    >
        <template v-if="opt.isMenuPopVisible">
            <div
                class="as-estun-right-menu-area-resize"
                v-resizeflexwidthzoom="{ ujt, id: 'estunmainright' }"
            >
                <EstunMainRightMenu :ujt="ujt" :opt="opt"></EstunMainRightMenu>
            </div>
            <div class="as-estun-right-main">
                <h2>{{ opt.curMenuItem.label }}</h2>
                <button @pointerdown.stop="closePopup()">关闭</button>
            </div>
        </template>
        <div v-else class="as-estun-right-menu-area">
            <EstunMainRightMenu :ujt="ujt" :opt="opt"></EstunMainRightMenu>
        </div>
    </div>
    <div
        v-else
        class="as-estun-right-opt"
        @pointerdown.stop="opt.isMenuVisible = !opt.isMenuVisible"
    >
        开
    </div>
</template>
<style scoped lang="scss">
.as-estun-right-opt {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 60px;
    width: 88px;
    height: 38px;
    text-align: center;
    background-color: var(--cm4);
}
.as-estun-right-cur {
    min-width: 280px;
    width: 280px;
}
.as-estun-right {
    min-width: 80px;
    width: 88px;
}
.as-estun-right,
.as-estun-right-cur {
    background-color: var(--ch4);
    display: flex;
    align-items: center;
    .as-estun-right-menu-area-resize {
        cursor: col-resize;
    }
    .as-estun-right-menu-area,
    .as-estun-right-menu-area-resize {
        height: 100%;
        width: 88px;
        display: flex;
        flex-direction: column;
    }
    .as-estun-right-menu-opt {
        height: 38px;
        text-align: center;
        background-color: var(--cm4);
    }
    .as-estun-right-menu {
        user-select: none;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        > div {
            width: 100%;
            text-align: center;
            line-height: 38px;
            cursor: pointer;
        }
        .cur {
            background-color: var(--ch2);
        }
    }
    .as-estun-right-main {
        height: 100%;
        flex-grow: 1;
        background-color: var(--ch2);
    }
}
</style>
